<template>
	<view class="my-container">
		<!-- 通知 -->
		<view class='notice-container'>
			<text class="news-icon" style="width:32rpx;height:32rpx;display:inline-block;"></text>
			<view class='notice container'>
				<view class="marquee-content" style="animation: kf-marque-animation 5.3s linear infinite;">
					<text>{{notice_content}}</text>
					<text style="display: inline-block; width: 5em;"></text>
					<text>{{notice_content}}</text>
					<text style="display: inline-block; width: 5em;"></text>
					<text>{{notice_content}}</text>
					<text style="display: inline-block; width: 5em;"></text>
				</view>
			</view>
		</view>
		<!-- 标题 -->
		<view class="entry-title">
			<view>HI,欢迎使用：</view>
			<view class="entry-title-line2">{{indexEntryTitle}}</view>
		</view>
		<!-- 登录入口按钮 -->
		<view class="entry-btn-container">
			<view v-if="!hasUserInfo">
				<view @click="getUserProfile(1)" class="submit-index-btn submit-box-btn1">
					<view class="btn-left btn-left-1">
						<view>{{agentName1}}</view>
						<view class="english-txt">Service point entrance</view>
					</view>
					<view class="btn-right">
						<text class="btn-icon btn-icon-1"></text>
					</view>
				</view>
			</view>
			<view v-if="!hasUserInfo">
				<view @click="getUserProfile(2)" class="submit-index-btn submit-box-btn2">
					<!-- <text class="btn-icon operators-icon"></text>
	        <text> {{agentName2}}入口</text> -->
					<view class="btn-left btn-left-2">
						<view>{{agentName2}}</view>
						<view class="english-txt">Service outlet entrance</view>
					</view>
					<view class="btn-right">
						<text class="btn-icon btn-icon-2"></text>
					</view>
				</view>
			</view>
			<view v-if="!hasUserInfo">
				<view @click="getUserProfile(3)" class="submit-index-btn submit-box-btn3">
					<!-- <text class="btn-icon operators-icon"></text>
		    <text> {{agentName2}}入口</text> -->
					<view class="btn-left btn-left-3">
						<view>{{agentName3}}</view>
						<view class="english-txt">Entrance of pick-up and delivery <br /> personnel</view>
					</view>
					<view class="btn-right">
						<text class="btn-icon btn-icon-3"></text>
					</view>
				</view>
			</view>
			<view v-if="!hasUserInfo">
				<view @click="getUserProfile(4)" class="submit-index-btn submit-box-btn4">
					<!-- <text class="btn-icon operators-icon"></text>
		    <text> {{agentName2}}入口</text> -->
					<view class="btn-left btn-left-4">
						<view>{{agentName4}}</view>
						<view class="english-txt">Regional agent background entry</view>
					</view>
					<view class="btn-right">
						<text class="btn-icon btn-icon-4"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 授权弹框 -->
		<view class='auth-view-container'
			v-if="showPhone">
			<view class="auth-in-view">
				<image src="/static/auth_logo.png" class="auth-img"></image>
				<text class='auth-header'>微信授权登录</text>
				<text class="auth-text auth-text-phone">点击"立即登录"，选择您常用的手机号点击"允许"。</text>
				<text class="auth-text">如您不想登录，请点击“暂不登录”。</text>
				<view class="anth-btn-container">
					<button class='auth-btn auth-btn-cancel' data-hi="phone" @click="cancelAuthPhone">
						暂不登录
					</button>
					<button class='auth-btn' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						立即登录
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationDuration: 5.3,
				notice_content: '口罩自动售货机,口罩自动售货机',
				animationData: {}, //公告动画
				indexEntryTitle: '猫的鞋管理',
				hasUserInfo: false,
				mGroup: 0,
				showPhone: false,
				agentName1: '服务点入口', //经销商
				agentName2: '服务网点入口', //运营人员
				agentName3: '取送员入口', //运营人员
				agentName4: '区域代理后台入口', //运营人员
			}
		},
		onLoad() {
			if (uni.getStorageSync(this.$util.HAS_USER_INFO)) {
				uni.switchTab({
					url: "/pages/home/home"
				})
			}
		},
		onShow() {
			
		},
		methods: {
			//取消授权手机号
			cancelAuthPhone(e) {
				this.showPhone = false
			},
			//授权手机号
			getPhoneNumber(e) {
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权
				
				}else{      //允许授权  
					this.$api.getWxPhone({code:e.detail.code}).then(res => {
						if (res.data.code == this.$ResponseStatus.OK) {
							let userInfo = uni.getStorageSync(this.$util.USER_INFO)
							userInfo.mobile = res.data.data
							
							// this.$api.updateUserInfo(userInfo) //更新用户手机号
							
							this.$store.commit('setUser', userInfo)
							uni.setStorageSync(this.$util.USER_INFO,userInfo)
							this.showPhone = false
							this.$store.commit('setHasUserInfo', true)
							uni.setStorageSync(this.$util.HAS_USER_INFO, true)
							uni.switchTab({
								url: "/pages/home/home"
							})
						}
					})
				}
			},
			//登录
			login() {
				let token = ""
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				uni.login({
					success: (res) => {
						/**获取unionid**/
						this.$api.login({
							code: res.code
						}).then((res) => {
							uni.hideLoading();
							if (res.data.code == this.$ResponseStatus.OK) {
								token = 1
								this.$store.commit('setToken', res.data.data)
								
								uni.setStorageSync(this.$util.USER_TOKEN_KEY, res.data.data)
							}
						});
					}
				})
				uni.getUserProfile({
					desc: '主页展示', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						if (res.errMsg == "getUserProfile:ok") {
							//同意授权
							if (token) {
								const {
									nickName,
									avatarUrl
								} = res.userInfo
								console.log("userInfo", res.userInfo)
								let data = {
									petName: nickName,
									profileUrl: avatarUrl
								}

								this.$store.commit('setUser', data)
								uni.setStorageSync(this.$util.USER_INFO, data)

								//更新用户信息
								this.showPhone = true;

							}
						}
					}
				})
			},
			// 用户授权（推荐这个）
			getUserProfile(mGroup) {
				this.mGroup = mGroup
				this.login();
			}
		}
	}
</script>

<style lang="scss">
	.my-container {
		padding-bottom: 50rpx;
	}

	.logo {
		width: 112rpx;
		height: 112rpx;
		margin-top: 100rpx
	}

	.logo .logo-img {
		width: 100%;
		height: 100%
	}

	.entry-title {
		color: #666666;
		font-size: 32rpx;
		margin-top: 68rpx;
		padding: 0 30rpx;

		.entry-title-line2 {
			color: #000000;
			font-size: 44rpx;
			font-weight: 600;
			margin: 24rpx 0 40rpx;
		}
	}

	.entry-btn-container {
		width: 100%;
		padding: 0 30rpx;

		.submit-index-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			padding: 52rpx 48rpx 52rpx 40rpx;

			.btn-left {
				font-size: 40rpx;
				box-sizing: border-box;
				text-align: left;

				.english-txt {
					margin-top: 20rpx;
					font-size: 28rpx;
				}

				&-1 {
					color: #EB728B;
				}

				&-2 {
					color: #FDBA39;
				}

				&-3 {
					color: #15C2FD;
				}

				&-4 {
					color: #20CBC9;
				}

			}

			.btn-right {
				width: 128rpx;
				height: 128rpx;

				.btn-icon {
					width: 128rpx;
					height: 128rpx;
					display: inline-block;
					margin-right: 20rpx;

					&-1 {
						background: url("@/static/index/icon_button_service@2x.png");
						background-size: cover;
					}

					&-2 {
						background: url("@/static/index/icon_button_outlets@2x.png");
						background-size: cover;
					}

					&-3 {
						background: url("@/static/index/icon_button_personnel@2x.png");
						background-size: cover;
					}

					&-4 {
						background: url("@/static/index/icon_button_backstage@2x.png");
						background-size: cover;
					}
				}
			}
		}

		.submit-box-btn1 {
			background: #FEF1F4;
		}

		.submit-box-btn2 {
			background: #FFFBF3;
		}

		.submit-box-btn3 {
			background: #F3FAFF;
		}

		.submit-box-btn4 {
			background: #F2FFFF;
		}
	}

	.auth-view-container {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		bottom: 0;
		z-index: 1000;

		.auth-in-view {
			position: relative;
			width: 640rpx;
			height: 518rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			padding: 94rpx 46rpx 40rpx;
			margin: 20vh auto 0;

			.auth-header {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
				text-align: center;
			}

			.auth-text {
				color: #4A4A4A;
			}

			.auth-text-phone {
				margin: 36rpx 0 20rpx 0;
			}

			.auth-img {
				position: absolute;
				top: -66rpx;
				left: 50%;
				width: 132rpx;
				height: 132rpx;
				margin-left: -66rpx;
			}

			.anth-btn-container {
				margin-top: 64rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 14rpx;

				.auth-btn {
					font-size: 36rpx;
					border-radius: 12rpx;
					font-weight: 600;
					padding: 0rpx 34rpx;
					box-sizing: border-box;
					color: #fff;
					background-color: $globalColor;
					border: 2rpx solid $globalColor;
				}

				.auth-btn-cancel {
					color: $globalColor;
					background-color: #fff;
				}
			}
		}
	}
</style>
